<!-- 主页面：withdraw_balance.vue -->
<template>
  <view class="withdraw-page" style="background-color: #f5f9ff; min-height: 100vh;">
   

    <!-- 标题栏 -->
    <view style="padding: 15px; text-align: center; position: relative;">
      <text style="font-size: 18px; font-weight: bold;">提现</text>
    </view>

    <!-- 主内容区 -->
    <view style="padding: 0 15px;">
      <!-- 到账账户 -->
      <view style="margin-bottom: 20px;" @click="showAccountPicker = true">
        <text style="font-size: 14px; color: #666; display: block; margin-bottom: 10px;">到账账户</text>
        <view style="background-color: #fff; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center;">
          <view style="display: flex; align-items: center;">
            <view style="width: 40px; height: 40px; background-color: #07c160; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
              <text style="color: #fff; font-size: 20px;">微</text>
            </view>
            <view>
              <text style="font-size: 16px; display: block;">微信钱包</text>
              <text style="font-size: 12px; color: #999; display: block;">2小时内到账</text>
            </view>
          </view>
          <view style="width: 12px; height: 12px; border-top: 2px solid #999; border-right: 2px solid #999; transform: rotate(45deg);"></view>
        </view>
      </view>

      <!-- 提现金额 -->
      <view style="margin-bottom: 20px;">
        <text style="font-size: 14px; color: #666; display: block; margin-bottom: 10px;">提现金额</text>
        <view style="background-color: #fff; border-radius: 8px; padding: 15px;">
          <view style="display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 12px;">
            <text style="font-size: 24px; font-weight: bold; color: #000;">￥</text>
            <input 
              type="number" 
              placeholder="0.00" 
              style="flex: 1; font-size: 24px; font-weight: bold; padding: 0 10px; color: #000;"
              v-model="amount"
              @input="validateAmount">
          </view>
          <view style="display: flex; justify-content: space-between; align-items: center;">
            <view>
              <text style="font-size: 12px; color: #999; display: block;">冻结金额212.00元</text>
              <text style="font-size: 12px; color: #999; display: block;">当前可提现金额3000.00元</text>
            </view>
            <text style="font-size: 12px; color: #1a73e8;" @click="withdrawAll">全部提现</text>
          </view>
        </view>
      </view>

      <!-- 数字键盘 -->
      <view style="background-color: #fff; border-radius: 8px; padding: 15px;">
        <view style="display: flex; flex-wrap: wrap; justify-content: space-between;">
          <view 
            v-for="(num, index) in keyboard" 
            :key="index" 
            style="width: 30%; height: 50px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;"
            @click="handleKeyPress(num)">
            <text v-if="num !== ''" style="font-size: 24px; color: #000;">{{num}}</text>
          </view>
        </view>
      </view>

      <!-- 确定按钮 -->
      <view 
        style="background-color: #1a73e8; border-radius: 8px; padding: 15px; margin-top: 20px;"
        :style="{opacity: amount > 0 ? 1 : 0.5}"
        @click="submitWithdraw">
        <text style="color: #fff; font-size: 16px; font-weight: bold; display: block; text-align: center;">确定</text>
      </view>
    </view>

    <!-- 账户选择弹窗 -->
    <view v-if="showAccountPicker" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: flex-end;">
      <view style="background-color: #fff; border-radius: 16px 16px 0 0; padding: 20px 15px;">
        <text style="font-size: 16px; color: #333; font-weight: bold; display: block; margin-bottom: 20px;">选择到账账户</text>
        
        <!-- 微信钱包选项 -->
        <view style="background-color: #fff; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
          <view style="display: flex; align-items: center;">
            <view style="width: 40px; height: 40px; background-color: #07c160; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
              <text style="color: #fff; font-size: 20px;">微</text>
            </view>
            <view>
              <text style="font-size: 16px; display: block;">微信钱包</text>
              <text style="font-size: 12px; color: #999; display: block;">2小时内到账</text>
            </view>
          </view>
          <view style="width: 16px; height: 16px; background-color: #07c160; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
            <text style="color: #fff; font-size: 12px;">✓</text>
          </view>
        </view>
        
        <!-- 银行卡选项 -->
        <view style="background-color: #fff; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
          <view style="display: flex; align-items: center;">
            <view style="width: 40px; height: 40px; background-color: #f5f5f5; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
              <text style="color: #666; font-size: 20px;">建</text>
            </view>
            <view>
              <text style="font-size: 16px; display: block;">建设银行 储蓄卡 (7652)</text>
              <text style="font-size: 12px; color: #999; display: block;">2小时内到账</text>
            </view>
          </view>
          <view style="width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%;"></view>
        </view>
        
        <!-- 添加新卡 -->
        <view style="background-color: #fff; border-radius: 8px; padding: 15px; text-align: center;">
          <text style="font-size: 16px; color: #1a73e8;">使用新卡提现</text>
        </view>
        
        <!-- 关闭按钮 -->
        <view style="margin-top: 20px; text-align: center;" @click="showAccountPicker = false">
          <text style="font-size: 16px; color: #666;">取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: 0,
      maxAmount: 3000,
      keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, ''],
      showAccountPicker: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleKeyPress(num) {
      if (num === '') return
      const newAmount = parseFloat(this.amount.toString() + num.toString())
      this.amount = Math.min(newAmount, this.maxAmount)
    },
    withdrawAll() {
      this.amount = this.maxAmount
    },
    validateAmount() {
      if (this.amount > this.maxAmount) {
        this.amount = this.maxAmount
      }
    },
    submitWithdraw() {
      if (this.amount <= 0) return
      
      uni.showLoading({ title: '处理中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: `成功提现${this.amount}元`,
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style>
.withdraw-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>